<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="apply-box flex-center w100">
		<!-- <image v-if="promotionBg" :src="promotionBg" class="box-bg" mode="widthFix"></image> -->
		<!-- 提交状态 -->
		<view class="content-box">
			<view class="from w100">
				<view class="from-item flex-row-center">
					<text class="from-name">培训类别</text>
					<view class="from-bobdy" @click="typeShow=true">
						<up-input border="none" disable placeholderClass="placeholderClass" inputAlign="right"
							fontSize="26rpx" color="#DEDEDE" placeholder="请选择培训类别"
							v-model="trainInfo.cultivate"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">名称</text>
					<view class="from-bobdy">
						<up-input border="none" placeholderClass="placeholderClass" inputAlign="right" fontSize="26rpx"
							color="#DEDEDE" placeholder="请填写名称" v-model="trainInfo.name"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">电话</text>
					<view class="from-bobdy">
						<up-input border="none" placeholderClass="placeholderClass" maxlength="11" inputAlign="right"
							fontSize="26rpx" type="number" color="#DEDEDE" placeholder="请填写联系电话"
							v-model="trainInfo.mobile"></up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">验证码</text>
					<view class="from-bobdy">
						<up-input border="none" type="number" inputAlign="right" maxlength="11"
							placeholderClass="placeholderClass" fontSize="26rpx" color="#B9BABB" placeholder="请输入验证码"
							v-model="trainInfo.code">
							<template #suffix>
								<view class="suffix-box flex-center">
									<up-code ref="uCodeRef" @change="codeChange" seconds="60"
										changeText="X秒重新获取"></up-code>
									<view class="getCode-btn flex-center" @click="getCode">
										<text class="text">{{codeTips}}</text>
									</view>
								</view>
							</template>
						</up-input>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">所属地区</text>
					<areaPickerVue :areaInfo="areaInfo" @confirmArea="confirmArea"></areaPickerVue>
				</view>
				<!-- 提交 -->
				<view class="submit-box flex-center w100">
					<!-- color="#593211" -->
					<up-button :customStyle="{'color':'#0A534F','height':'64rpx','width':'100%'}" @click="submitTrain"
						text="立即提交" loadingText="提交中" :loading="trainInfo.loadingState" shape="circle"
						color="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)"></up-button>
				</view>
			</view>
			<!-- <text class="tips-text" @click="viewTips">代理说明</text> -->
		</view>
		<up-picker :show="typeShow" @cancel="closeType" keyName="name" :columns="typeColumns"
			@confirm="confirmType"></up-picker>
	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	const rules = {
		name: {
			required: true,
			msg: '请填写名称'
		},
		mobile: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		code: {
			required: true,
			msg: '请填写验证码'
		}
	};
	const promotionBg = ref(computed(() => configInfo.proxy_join_bg?.value));
	import areaPickerVue from '@/components/area/areaPicker.vue';
	const typeColumns = reactive([]);
	const typeShow = ref(false);
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);
	const userStore = userInfoStore();
	const trainInfo = reactive({
		proxyAddress: '',
		loadingState: false,
		name: '',
		mobile: '',
		cultivate: '',
		cultivateId: 0,
		code: ''

	})
	const areaInfo = reactive({
		city: userStore.userInfo?.city,
		province: userStore.userInfo?.province,
		district: userStore.userInfo?.district,
		area: userStore.userInfo?.area,
	});
	onLoad(() => {
		getCultivate();
	});
	const getCultivate = async () => { //获取代理申请详情
		const res = await $Api.user.getCultivate();
		if (res.code == 1) {
			typeColumns.push(res.data)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'error',
				duration: 2000
			});
		}
	};
	const closeType=()=>{
		typeShow.value = false;
	}
	const codeChange = (text) => { //code提示切换
		codeTips.value = text;
	};
	const confirmType = (e) => {
		trainInfo.cultivate = e.value[0].name
		trainInfo.cultivateId = e.value[0].value;
		typeShow.value = false;
	}
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(trainInfo.mobile)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: trainInfo.mobile,
				event: 'cultivate'
			});
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const confirmArea = (area) => { //确认选择省市区
		areaInfo.city = area.city;
		areaInfo.province = area.province;
		areaInfo.district = area.district;
		console.log('confirmArea', area, areaInfo);
	};
	const submitTrain = async () => { //提交申请
		if (trainInfo.loadingState) return;
		const validate = validateForm(trainInfo, rules); //验证
		if (!validate.status) return
		if (!areaInfo.province) {
			uni.$u.toast('请选择地区');
			return
		}
		trainInfo.loadingState = true;
		const res = await $Api.user.submitCultivate({
			name: trainInfo.name,
			mobile: trainInfo.mobile,
			type: trainInfo.cultivateId,
			captcha: trainInfo.code,
			province: areaInfo.province,
			city: areaInfo.city,
			district: areaInfo.district,
		});
		if (res.code == 1) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
				trainInfo.loadingState = false;
			}, 1200)
		} else {
			trainInfo.loadingState = false;
			uni.$u.toast(res.msg)
		}
		//TODO:提交代理申请

	};
</script>
<style lang="scss">
	.placeholderClass {
		color: $placeholder-color !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.apply-box {
		flex-direction: column;
		padding: 24rpx;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
	}

	.box-bg {
		position: absolute;
		width: 750rpx;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: -1;
	}

	.cancel-tips {
		border-radius: 24rpx;
		border: 2rpx solid rgba(105, 187, 176, 1);
		background-color: #222E30;
		padding: 35rpx;

		.title {
			display: block;
			font-size: 32rpx;
			font-weight: 500;
			color: $name-color;
			margin-bottom: 48rpx;
		}

		.tips-item {
			margin-bottom: 24rpx;

			.icon {
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
				display: block;
				margin-right: 12rpx;
				background-color: #7EDE9E;
				flex-shrink: 0;
				margin-top: 14rpx;
			}

			.text {
				font-size: 28rpx;
				color: $description-color;
			}
		}

		.tips {
			font-size: 28rpx;
			display: block;
			color: $description-color;
			margin-top: 48rpx;
		}
	}

	.content-box {
		border: 1rpx solid #ccc;
		// background-color: rgba(255, 255, 255, 0.2);
		background: #222528;
		// backdrop-filter: blur(10px);
		// -webkit-backdrop-filter: blur(10px);
		padding: 24rpx;
		border-radius: 18rpx;
		min-width: 600rpx;
	}

	.from-item {
		box-sizing: border-box;
		width: 100%;
		margin-top: 60rpx;
		justify-content: space-between;

		.from-name {
			display: block;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 38rpx;
		}

		.from-bobdy {
			display: flex;
			flex: 1;
			align-items: center;
		}

		.getCode-btn {
			padding-left: 18rpx;
			border-left: 2rpx solid #4D4D4D;
			font-weight: 500;
			font-size: 24rpx;
			color: #66B7AF;

		}

		.up-textarea-box {
			color: #fff;
		}


	}

	.submit-box {
		margin-top: 32rpx;
	}

	.tips-text {
		display: block;
		width: 100%;
		text-align: center;
		color: #93612E;
		font-size: 28rpx;
		margin-top: 24rpx;
		text-decoration: underline;
		text-decoration-color: #93612E;
	}
</style>